<template>
  <div class="multi-container">
    <a-card class="m-form" style="width: 100%">
      <a-form
        ref="multiForm"
        :model="formState"
        @finish="onSearch"
        layout="inline"
      >
        <div class="form-content">
          <div class="form-item">
            <a-form-item name="name" label="姓名">
              <a-input
                v-model:value="formState.name"
                placeholder="请输入姓名"
              ></a-input>
            </a-form-item>
            <a-form-item name="sex" label="性别">
              <a-select
                v-model:value="formState.sex"
                :style="{ width: '180px' }"
                placeholder="请选择"
              >
                <a-select-option value="man">男</a-select-option>
                <a-select-option value="woman">女</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item name="prize" label="价格" v-if="expand">
              <a-input
                v-model:value="formState.prize"
                placeholder="请输入价格"
              ></a-input>
            </a-form-item>
            <a-form-item name="username" label="账号" v-if="expand">
              <a-input
                v-model:value="formState.username"
                placeholder="请输入账号"
              ></a-input>
            </a-form-item>
            <a-form-item name="prize" label="地址" v-if="expand">
              <a-input
                v-model:value="formState.addr"
                placeholder="请输入地址"
              ></a-input>
            </a-form-item>
            <a-form-item name="username" label="日期" v-if="expand">
              <a-input
                v-model:value="formState.date"
                placeholder="请输入日期"
              ></a-input>
            </a-form-item>
          </div>
          <div class="form-search">
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button
              style="margin: 0 8px"
              @click="() => multiForm!.resetFields()"
              >重置</a-button
            >
            <a style="font-size: 12px" @click="expand = !expand">
              <template v-if="expand">
                合并
                <UpOutlined />
              </template>
              <template v-else>
                展开
                <DownOutlined />
              </template>
            </a>
          </div>
        </div>
      </a-form>
    </a-card>
    <a-card class="m-table">
      <div class="batch-action">
        <a-button type="primary" size="middle" @click="onToggleEdit">
          <template #icon>
            <file-add-outlined />
          </template>
          添加
        </a-button>
        <a-button type="danger" size="middle" @click="() => onDelete()">
          <template #icon>
            <delete-outlined />
          </template>
          删除</a-button
        >
      </div>
      <a-table
        :dataSource="showList"
        :columns="columns"
        :pagination="false"
        :loading="loading"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :scroll="{
          x: 1500,
          y: expand ? 'calc(100vh - 574px)' : 'calc(100vh - 510px)',
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.name === 'action'">
            <div class="action-button">
              <a-button type="primary" size="small" @click="onEdit(record)">
                <template #icon>
                  <form-outlined />
                </template>
                编辑
              </a-button>
              <a-button
                type="danger"
                size="small"
                @click="onDelete(record.key)"
              >
                <template #icon>
                  <delete-outlined />
                </template>
                删除</a-button
              >
            </div>
          </template>
        </template>
      </a-table>
      <div class="m-page">
        <a-pagination
          :current="pageConfig.current"
          :page-size="pageConfig.pageSize"
          :total="pageConfig.total"
          show-size-changer
          :page-size-options="pageSizeOptions"
          :show-total="(total: number) => `共 ${total} 条`"
          @change="onPageChange"
        >
          <template #buildOptionText="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </a-card>
  </div>
  <EditMember
    :show="editMemberShow"
    :member="editMember"
    @onToggleEdit="onToggleEdit"
  />
</template>

<script lang="ts" setup>
import { createVNode, onMounted, reactive, ref } from "vue";
import { FormInstance, Modal } from "ant-design-vue";
import { ITable, ITablePage } from "@/type/Table";
import TableService from "@/service/tableService";
import {
  DeleteOutlined,
  FormOutlined,
  DownOutlined,
  UpOutlined,
  FileAddOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import EditMember from "./component/editMember.vue";
type Key = {
  key: number;
};
type TableItem = ITable & Key;
let lists: TableItem[] = reactive([]);
let showList: TableItem[] = reactive([]);
let expand = ref<boolean>(false);
let loading = ref<boolean>(false);
const formState = reactive({
  name: "",
  age: "",
  sex: null,
  prize: "",
  username: "",
  addr: "",
  date: "",
});
const selectedRowKeys = reactive<Key[]>([]);
let pageConfig = ref<ITablePage>({
  current: 1,
  pageSize: 10,
  total: 0,
});
const pageSizeOptions = ref<string[]>(["10", "20", "30", "40", "50"]);
const columns = [
  {
    key: "key",
    fixed: "left",
    width: 30,
  },
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 150,
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
    width: 150,
  },
  {
    title: "性别",
    dataIndex: "sex",
    key: "sex",
    width: 150,
  },
  {
    title: "价格",
    dataIndex: "prize",
    key: "prize",
    width: 150,
  },
  {
    title: "账号",
    dataIndex: "username",
    key: "username",
    width: 150,
  },
  {
    title: "地址",
    dataIndex: "addr",
    key: "addr",
    width: 150,
  },
  {
    title: "日期",
    dataIndex: "date",
    key: "date",
    width: 150,
  },
  {
    title: "省份",
    dataIndex: "provience",
    key: "provience",
    width: 150,
  },
  {
    title: "城市",
    dataIndex: "city",
    key: "city",
    width: 150,
  },
  {
    title: "邮编",
    dataIndex: "eMail",
    key: "eMail",
    width: 150,
  },
  {
    title: "操作",
    dataIndex: "action",
    name: "action",
    key: "operation",
    fixed: "right",
    width: 180,
  },
];
const multiForm = ref<FormInstance>();
const editMemberShow = ref(false);
const editMember = ref<ITable | undefined>();

/**
 * 计算展示数据
 */
const caculateShowList = () => {
  showList.length = 0;
  let startIndex = (pageConfig.value.current - 1) * pageConfig.value.pageSize;
  let endIndex = pageConfig.value.current * pageConfig.value.pageSize;
  endIndex = endIndex > lists.length - 1 ? lists.length - 1 : endIndex;
  showList.push(...lists.slice(startIndex, endIndex));
};
/**
 * 获取数据
 */
const getList = () => {
  loading.value = true;
  TableService.getTableData().then((res) => {
    res.forEach((item: ITable, index: number) => {
      const tableItem: TableItem = {
        ...item,
        key: index,
      };
      lists.push(tableItem);
    });
    pageConfig.value.total = res.length;
    caculateShowList();
  });
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
const onSearch = (values: any) => {
  getList();
  message.success("触发查询");
};
const onSelectChange = (values: Key[]) => {
  selectedRowKeys.length = 0;
  selectedRowKeys.push(...values);
};
const onPageChange = (current: number, pageSize: number) => {
  pageConfig.value = {
    ...pageConfig.value,
    current,
    pageSize,
  };
  caculateShowList();
};
/**
 * 批量删除或单个删除
 * @param param 单个删除传参
 */
const onDelete = (param?: number) => {
  if (typeof param === "undefined" && selectedRowKeys.length === 0) {
    message.error("未选中任何行");
    return;
  }
  Modal.confirm({
    title: "温馨提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: "你确定要删除当前项吗?",
    okText: "确认",
    cancelText: "取消",
    onOk: () => {
      const deleteIndexs: any[] =
        typeof param !== "undefined" ? [param] : [...selectedRowKeys];
      const res = lists.filter((item) => {
        return !deleteIndexs.includes(item.key);
      });
      lists.length = 0;
      lists.push(...res);
      loading.value = true;
      caculateShowList();
      loading.value = false;
      message.success("模拟删除成功");
    },
  });
};
const onEdit = (item?: ITable) => {
  editMember.value = item || undefined;
  onToggleEdit();
};

const onToggleEdit = () => {
  editMemberShow.value = !editMemberShow.value;
};

onMounted(() => {
  getList();
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.multi-container {
  margin: 20px;
  height: calc(100% - 80px);
  overflow-y: scroll;

  :deep(.ant-card-body) {
    padding-bottom: 0;

    .ant-table-thead > tr > th {
      font-weight: bolder;
    }
  }

  .m-form {
    margin-bottom: 20px;

    .form-content {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .form-item {
        display: flex;
        width: 80%;
        flex-wrap: wrap;
      }

      .form-search {
        flex: 1;
      }

      :deep(.ant-col) {
        margin: 0 10px 20px 0;
      }
    }
  }

  .m-table {
    .batch-action {
      width: 100%;
      display: flex;
      margin-bottom: 20px;
      justify-content: flex-end;

      button {
        margin-left: 10px;
      }
    }

    .action-button {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }

    .m-page {
      height: 57px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
